<template>
	<view>
		<uni-byt-top-com title="支付控件" :backShow="backShow"></uni-byt-top-com>
		<scroll-view scroll-y="true" :style="{height:scrollHeight+'px'}">
			<!-- 支付组件 -->
			<view class="flex-col">
				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">默认按钮样式：</text>
					</view>
					<uni-byt-pay ref="pay" @open="payOpen" @close="payClose"
						@createOrder="payCreateOrder"></uni-byt-pay>
				</view>

				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16 ">自定义按钮文字：</text>
						<text class="text-size-16 text-min-color">btnName="自定义按钮文字"</text>
					</view>

					<uni-byt-pay btnName="自定义按钮文字" ref="pay" @open="payOpen" @close="payClose"
						@createOrder="payCreateOrder"></uni-byt-pay>
				</view>

				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">自定义按钮样式：</text>
						<text class="text-size-16 text-min-color">btnStyleName="width:100px;background-color:red"</text>
					</view>
					<uni-byt-pay btnStyleName="width:100px;background-color:red" ref="pay" @open="payOpen"
						@close="payClose" @createOrder="payCreateOrder"></uni-byt-pay>
				</view>

				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">设置弹窗支付金额：</text>
						<text class="text-size-16 text-min-color">:money="1000"</text>
					</view>
					<uni-byt-pay :money="1000" ref="pay" @open="payOpen" @close="payClose"
						@createOrder="payCreateOrder"></uni-byt-pay>
				</view>

				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">APP支持支付宝支付(此功能为模拟没有这个参数，支付宝支付只支持app)：</text>
						<text class="text-size-16 text-min-color">:appShow="true"</text>
					</view>
					<uni-byt-pay :appShow="true" :money="1000" ref="pay" @open="payOpen" @close="payClose"
						@createOrder="payCreateOrder"></uni-byt-pay>
				</view>

				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">自定义收银台样式：</text>
						<text class="text-size-16 text-min-color">styleName="backgroundColor:red"</text>
					</view>
					<uni-byt-pay styleName="backgroundColor:red" ref="pay" @open="payOpen" @close="payClose"
						@createOrder="payCreateOrder"></uni-byt-pay>
				</view>


				<view class="flex-col my-14 mx-15">
					<view class="flex-col my-14">
						<text class="text-size-16">自定义收银台高度（默认60vh）：</text>
						<text class="text-size-16 text-min-color">height="80vh"</text>
					</view>
					<uni-byt-pay height="80vh" ref="pay" @open="payOpen" @close="payClose"
						@createOrder="payCreateOrder"></uni-byt-pay>
				</view>

			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		getHeight
	} from "@/util"
	export default {
		data() {
			return {
				scrollHeight: getHeight(),
				backShow: false,
			}
		},
		onLoad(play) {
			if (play.backShow) {
				if (play.backShow == '1') {
					this.backShow = true
				}
			}
		},
		methods: {
			payCreateOrder() {
				uni.$u.toast("创建支付")

				setTimeout(() => {
					uni.$u.toast("调取支付控件")
					this.$refs.pay.orderPayment()
				}, 200)
			},
			payClose() {
				uni.$u.toast("关闭弹窗")
			},
			payOpen() {
				uni.$u.toast("打开弹窗")
			}
		}
	}
</script>

<style scoped>
</style>